<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.augmentum.oes.Constants" %>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/login.css" type="text/css" />
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
  </head>
  <body>
    <c:if test="${!empty NO_LOGIN_MSG or !empty TokenVerify}">
      <script>
        $(function(){
          showMsg();
          window.setTimeout(hiddenMsg,3000);
        });
        function showMsg() {
          //$("#flashMsg").fadeIn(1500);
        }
        function hiddenMsg() {
          $("#flashMsg").fadeOut(1500);
        }
      </script>
    </c:if>
    <div class="flash-msg" id="flashMsg">
      ${NO_LOGIN_MSG}
    <c:forEach items="${TokenVerify }" var="map">
      <h1>${map["loginToken"]}</h1>
    </c:forEach>
    <%session.removeAttribute(Constants.NO_LOGIN_MSG); %>
    </div>
    <div class="logo-panel float-left">
      <div class="logo-icon-panel">
      </div>
      <div class="logo-title">
        Online Exam Web System
      </div>
    </div>
    <div class="welcome-panel">
      Welcome to login!${TokenVerify}
    </div>
    <div class="login-panel padding-top-30" >
      <div id="errorMsgPanel" class="disshow error-msg">
        <% String tipMessage = (String)session.getAttribute(Constants.TIP_MESSAGE);
          session.removeAttribute(Constants.TIP_MESSAGE);
          if (tipMessage != null) {
             out.print(tipMessage);
        %>
        <script>
             document.getElementById("errorMsgPanel").className = "error-msg";
        </script>
        <%
          }
          Map<String, String> errorMessage = (Map<String, String>)session.getAttribute(Constants.ERROR_MESSAGE);
          session.removeAttribute(Constants.ERROR_MESSAGE);
          if (errorMessage == null) {
            errorMessage = new HashMap<String, String>();
          }%>
      </div>
      <div class="input-panel">
        <form action="<%=PathUtil.getFullPath("showlogin.action") %>" method="POST" id="loginForm">
          <div class="outdiv username-icon">
            <span><input type="text" value="${username }" name="userName" id="userName" class="username" placeholder="Username"/></span>
          </div>
          <div class="outdiv password-icon margin-top-20" >
            <input type="password" value="${password }" name="password" id="password" class="username" placeholder="password" />
          </div>
          <div class="login-button margin-top-20" onclick="login()" onmouseout="this.className='login-button margin-top-20'" onmouseover="this.className='login-button-over margin-top-20'">
            Login
          </div>
          <div class="remeber-forgot">
            <div class="float-left">
              <input type="checkbox" name="remeberme" <c:if test="${!empty username && !empty password}">checked</c:if> /> Remeber me 
           </div>
           <div class="float-right">
             <a href="#">Forgot password?</a>
           </div>
         </div>
      </form>
    </div>
    <div class="error-icon">
      <div id="userNameError" class="disshow">
        <img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Client_Login_Wrong_20X20.png"/>
      </div>
      <div id="passwordError" class="disshow margin-top-35px">
        <img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Client_Login_Wrong_20X20.png"/>
      </div>
    </div>
    </div>
    <% if (errorMessage.get("passwordMessage") != null && errorMessage.get("userNameMessage") == null) {
    %>
    <script>
      window.onload = function(){
      passRequire();
     };
     </script>
     <% }%>
     <% if (errorMessage.get("userNameMessage") != null && errorMessage.get("passwordMessage") == null) {
     %>
      <script>
      window.onload = function(){
         usernameRequire();
      };
      </script>
      <% } %>
      <% if (errorMessage.get("userNameMessage") != null && errorMessage.get("passwordMessage") != null) {
      %>
      <script>
      window.onload = function() {
          userName_Password_Require();
      };
      </script>
      <% } %>
      <% if (tipMessage != null) {
         if (tipMessage.equals("UserName Error!")) {
      %>
              <script>
                document.getElementById("userNameError").className = "";
              </script>
      <%
         } else if (tipMessage.equals("Password Error!")) {
      %>
             <script>
                  document.getElementById("passwordError").className = "margin-top-35px";
             </script>
      <%  }
       } %>
    <div class="footer">
      <p > Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <script type="text/javascript" src="<%=PropertyUtil.getStaticPath() %>/static/js/login.js" ></script>
  </body>
</html>